<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>会员服务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .open-vip{width: 100%;z-index: 9999;background-color: #fff;}
        .open-vip ul{padding: 0 12px;}
        .open-vip ul li{padding: 15px 0;position: relative;font-size: 14px;color: #444;}
        .open-vip ul li .title{color: #ffc10c;font-size: 16px;text-align: center;}
        .open-vip ul li .title i{font-size: 22px;vertical-align: middle;margin-right: 5px;}
        .open-vip ul li>div{display: -webkit-box;display: box;}
        .open-vip ul li>div .left{width: 60px;text-align: center;}
        .open-vip ul li>div .right{box-flex: 1;-webkit-box-flex: 1;}
        .month .left{line-height: 30px;}
        .month .right{overflow: hidden;}
        .month .item{float: left;width: 22%;margin-right: 3%;text-align: center;line-height: 30px;
            border: 1px solid #ddd;border-radius: 4px;}

        .money{}
        .money .right{overflow: hidden;}
        .money .right .cash{float: left;}
        .money .right .cash span{color: #ffc10c;margin-right: 5px;}
        .money .right label{float: right;}
        .money .right label input{vertical-align: middle;margin-right: 3px;}

        .b-btn{padding: 0 12px 12px;}
        .b-btn button{display: block;-webkit-appearance: none;border: none;outline: none;color: #fff;
            background-color: #ffc10c;height: 45px;border-radius: 4px;width: 100%;font-size: 16px;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<!--遮罩-->
<div class="mask"></div>

<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">会员服务</div>
    </div>
</header>

<div class="open-vip">
    <ul>
        <li class="bottom-line">
            <p class="title"><i class="iconfont icon-vip"></i>续费会员</p>
        </li>
        <li class="bottom-line">
            <div class="account">
                <div class="left">账号:</div>
                <div class="right">187665329712</div>
            </div>
        </li>
        <li class="bottom-line">
            <div class="month">
                <div class="left">月份:</div>
                <div class="right">
                    <div class="item">1</div>
                    <div class="item">3</div>
                    <div class="item">6</div>
                    <div class="item">其它</div>
                </div>
            </div>
        </li>
        <li>
            <div class="money">
                <div class="left">金额:</div>
                <div class="right">
                    <div class="cash"><span>20</span>元</div>
                    <label><input type="checkbox"/>到期自动续费</label>
                </div>
            </div>
        </li>
    </ul>
    <div class="b-btn">
        <button type="button">立即支付</button>
    </div>
</div>
</body>
<script>
    $('.month .item').click(function(){
        $(this).css('border-color','#ffc10c').siblings().css('border-color','');
    })
</script>
</html>